<template>
  <i-biz-control-base
    :controller="c"
    :class="[
      ns.b(),
      ns.is('hasSub', Boolean(modelData.subCaption)),
      ns.is('show-icon', !!c.model.sysImage),
    ]"
  >
    <view :class="ns.b('caption')">
      <i-biz-icon
        v-if="!!c.model.sysImage"
        :class="[ns.be('caption', 'icon')]"
        :icon="c.model.sysImage"
      />
      <text>{{ c.state.caption }}</text>
    </view>
    <view v-if="!!modelData.subCaption" :class="ns.b('sub-caption')">
      {{ modelData.subCaption }}
    </view>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { PropType } from "vue";
import { ICaptionBar } from "@ibiz/model-core";
import { CaptionBarController } from "@ibiz-template/runtime";
import { useControlController, useNamespace } from "@/use";

const props = defineProps({
  modelData: {
    type: Object as PropType<ICaptionBar>,
    required: true,
  },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
});

const c = useControlController((...args) => new CaptionBarController(...args));
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
</script>
<style lang="scss">
@import "./i-biz-caption-bar-control.scss";
</style>
